<template>
  <el-drawer
    size="90%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :title="dialogTitle"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-divider />
    <dawnFlow
      :NodeBar="true"
      :ToolBar="true"
      :isPreview="true"
      ref="uploadFileRef"
      style="width: 100%; min-height: 600px; overflow: auto"
    />
    <template #footer>
      <el-button icon="Close" size="large" type="danger" plain @click="handleClose"
        >取消</el-button
      >
    </template>
    <div class="opt-style-text1">
      <!-- <div style="margin-top: 2px; cursor: pointer">
        <div class="nodeTagStyle inExamineBackColor"></div>
        待审核
        <div class="nodeTagStyle agreeBackColor"></div>
        已通过
        <div class="nodeTagStyle disagreeBackColor"></div>
        不同意
        <div class="nodeTagStyle rejectBackColor"></div>
        驳回
      </div> -->
      <div style="margin-left: 10px">
        <el-button type="primary" link @click="downloadClick"
          ><el-icon size="18"><Picture /></el-icon>导出图片</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup>
import { GetFlowByFlowId } from "@/api/flow";
import { computed, onMounted, ref } from "vue";
const props = defineProps({
  isVisibles: Boolean,
  dialogTitle: String,
  flowId: { type: String, required: true },
});
const emit = defineEmits(["closeBnt", "closePreBnt"]);

//初始加载dom
onMounted(() => {});
//流程ref
const uploadFileRef = ref();

//打开时加载
const handleDialogOpen = function () {
  uploadFileRef.value.delFlowClick();
  GetFlowByFlowId({ flowId: props.flowId }).then(({ data, code }) => {
    if (code == 200) {
      uploadFileRef.value.setFlowJson(data.FlowContent);
    }
  });
};

//导出图片
const downloadClick = function () {
  uploadFileRef.value.downloadImageClick();
};

//是否显示dialog
const dialogVisibled = computed(() => {
  return props.isVisibles;
});
//关闭事件
const handleClose = () => {
  emit("closePreBnt");
};
</script>
